<route lang="json5">
{
  layout: 'tabbar',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '活动广场',
  },
}
</route>

<template>
  <z-paging 
    ref="pagingRefs" 
    v-model="dataList" 
    :default-page-size="10"
    :safe-area-inset-bottom="true"
    :refresher-complete-delay="500"
    @query="queryList"
  >
    <template #top>
      <!-- 导航 -->
      <!--  #ifdef MP-WEIXIN -->
      <view class="w-full bg-#fff" 
        :style="{ height: common.menuTop + 'px' }"
        :class="[{ 'dark-color': themeConfig.theme === 'dark' }]"
      ></view>
      <!--  #endif -->
        
      <!-- tab选项 -->
      <view class="w-750rpx m-a bg-#fff px-32rpx pb-6px box-border flex items-end"
        :style="{ height: common.menuButtonHeight + 'px' }"
        :class="[{ 'dark-color': themeConfig.theme === 'dark' }]"
      >
        <base-tabs 
          :tab="pagination.status" 
          :tabList="enumParams.activityTypeList" 
          @changeTab="changeTab" 
          :isShowCity="false" 
        />
      </view>
      <view class="border-1px"></view>
      
      <!-- 走马灯 -->
      <view class="w-750rpx m-a" v-if="isShowTips">
        <wd-notice-bar 
          text="在了解对方之前，不要透露过多个人信息，包括地址、电话号码等敏感信息。任何要求提供验证码或借钱的行为都可能是骗局，务必保持警惕‌"
          :color="themeConfig.theme === 'dark' ? '#fff': '#1B1116'"
          background-color="rgba(255, 255, 255, 0)"
        >
          <template #prefix>
            <view class="w-32rpx h-32rpx font-size-0 pr-16rpx">
              <wd-img 
                width="100%" 
                height="100%" 
                :src="tips" 
                mode="aspectFill" 
              />
            </view>
          </template>
        </wd-notice-bar>
      </view>
      <view style="width: 100%;height: 36px;" v-else></view>
    </template>

    <!-- 骨架屏 - 加载中 -->
    <!-- <view class="activity-list" v-if="isFirst">
      <view class="w-750rpx m-a bg-#fff"
        :class="[{ 'dark-color': themeConfig.theme === 'dark' }]"
        v-for="item in 3" 
        :key="item"
      >
        <view class="pl-32rpx pr-32rpx pt-16rpx pb-16rpx">
          <view style="display: flex;">
            <wd-skeleton 
              animation="gradient" 
              :custom-style="{ width: '100%', marginRight: '12px' }" 
              :row-col="[{ width: '100%' }, { width: '30%' }, { width: '50%' }]" 
            />
            <wd-skeleton animation="gradient" :row-col="[{ size: '176rpx', type: 'rect' }]" />
          </view>
        </view>
        <view class="border-1px"></view>
      </view>
    </view> -->
    
    <!-- 加载中 -->
    <!-- !isFirst &&  -->
    <view class="flex-center py-50rpx" v-if="loading">
      <wd-loading size="32rpx" color="#9C6DEF" />
    </view>
    
    <activity-item
      v-for="item in dataList"
      :key="item.id"
      :data="item"
      @end="handleEnd"
    />

    <template #bottom>
      <view class="w-full h-50px"></view>
    </template>
  </z-paging>
</template>

<script lang="ts" setup>
import ActivityItem from "@/components/list-item/activity-item.vue";
import BaseTabs from "@/components/base/base-tabs.vue";
import { GetEventInfoPage } from "@/service/db_activity";
import { useCommonStore, useThemeStore, useUserStore } from "@/store";
import { enumParams, share } from "@/enum";
import { tips } from "@/static/base64";
import { useToast } from "wot-design-uni";

// 主题颜色
const { themeConfig } = useThemeStore();
const common = useCommonStore();
const user = useUserStore();
const toast = useToast();

// 请求payload参数
const pagination = reactive<AnyObj>({
  status: ''
});
const dataList = ref([]);
const pagingRefs = ref();
const isFirst = ref(true);
const loading = ref(false);
const queryList = async (pageNo, pageSize) => {
  try {
    loading.value = true;
    const { data } = await GetEventInfoPage(pagination, {
      pageNum: pageNo,
      pageSize,
    });
    loading.value = false;
    isFirst.value = false;
    const list = data.records || [];
    pagingRefs.value.complete(list);
  } catch (error) {
    loading.value = false;
    pagingRefs.value.complete(false);
    isFirst.value = false;
  }
}

const changeTab = (typeCode) => {
  pagination.status = typeCode;
  pagingRefs.value.reload();
}

// 活动结束提示
const handleEnd = () => {
  toast.show('活动已结束!');
}

const isShowTips = ref(false);
onHide(() => {
  isShowTips.value = false;
})

onShow(() => {
  isShowTips.value = true;
})

onShareAppMessage(() => {
  const id = user.userInfo.id || '';
  return {
    title: '我满心期待，与你相遇的未来！',
    path: `/pages/tabbar/index?instrId=${id}`,
    imageUrl: share
  }
})
</script>

<style lang="scss" scoped>
:deep(.wd-notice-bar) {
  padding-right: 0 !important;
}
</style>
